<template>
  <div>
    <el-container>
      <el-aside
        margin-left="5px"
        width="250px"
      >
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>单位编码树</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
            >操作按钮</el-button>
          </div>
          <div>
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :auto-expand-parent="true"
              node-key="id"
              :default-expanded-keys="[1]"
              :default-checked-keys="[2]"
            ></el-tree>
          </div>
        </el-card>
      </el-aside>
      <el-main>
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>单位编码维护</span>
            <el-button
              @click="dialogFormVisible = true"
              type="text"
              style="float: right; padding: 3px 0"
            >添加</el-button>
          </div>
          <div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    v-model="input"
                    placeholder="单位编码"
                  ></el-input>
                  <el-input
                    v-model="input"
                    placeholder="单位名称"
                  ></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content all-button">
                  <el-button
                    type="primary"
                    size="mini"
                  >搜索</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                  >清除</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                  >导出</el-button>
                </div>
              </el-col>
            </el-row>
            <!-- table -->
            <div class="table_wrap">
              <el-table
                height="500px"
                :row-style="{height: '0px'}"
                :cell-style="{padding: '5px'}"
                :data="tableData"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="dwbm"
                  label="单位编码"
                >
                </el-table-column>
                <el-table-column
                  prop="dwmc"
                  label="单位名称"
                >
                </el-table-column>
                <el-table-column
                  prop="dwjb"
                  label="单位级别"
                >
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="单位性质码"
                >
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="有无基础数据"
                >
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                    >修改</el-button>
                    <el-button
                      type="text"
                      size="small"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="block">
              <el-pagination
                :page-sizes="pageSizes"
                layout="sizes, prev, pager, next, jumper"
                @current-change="currentChange"
                :total="total"
                :page-size="pageSizeNum"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
    <!-- 添加弹窗 -->
    <el-dialog
      title="添加"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :inline="true"
        :model="form"
        :rules="rule"
        ref="addMembersForm"
      >
        <el-form-item
          prop="dwbm"
          label="单位编码"
          :label-width="formLabelWidth"
        >
          <el-input
            type="number"
            class="dialog_input"
            v-model="form.dwbm"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="单位级别"
          prop="dwjb"
          :label-width="formLabelWidth"
        >
          <el-input
            class="dialog_input"
            v-model="form.dwjb"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="单位名称"
          prop="dwmc"
          :label-width="formLabelWidth"
        >
          <el-input
            class="dialog_input"
            v-model="form.dwmc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="shared"
          label="单位性质"
          label-width="120px"
        >
          <el-select
            class="dialog_input"
            v-model="form.region"
            placeholder="请选择"
          >
            <el-option
              label="直管"
              value="1"
            ></el-option>
            <el-option
              label="代管"
              value="2"
            ></el-option>
            <el-option
              label="控股"
              value="3"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 单选 -->
        <el-form-item
          prop="shared"
          label="有无基础数据"
          :label-width="formLabelWidth"
        >
          <el-radio
            v-model="form.radio"
            label="1"
          >有</el-radio>
          <el-radio
            v-model="form.radio"
            label="0"
          >无</el-radio>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitaMembersForm('addMembersForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUnit,
  listChildren,
  allTree,
  toChangeDwbm,
  pageSize,
  addSave
} from '@/api/dmgl/newdwbm.js'
export default {
  data() {
    return {
      // 多少条数据
      total: 0,
      pageSizeNum: 0,
      pageSizes: [],
      // 添加
      form: {
        radio: '1',
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      tableData: [],
      input: '',
      // 表单验证
      rule: {
        dwbm: [{ required: true, message: '不能为空', trigger: 'blur' }],
        dwjb: [{ required: true, max: 1, message: '长度在1字符', trigger: 'blur' }],
        dwmc: [{ required: true, min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }],
        // shared: [{ required: true, message: '请选择', trigger: 'blur' }]

      },
      data: [{
        label: '电力可靠性管理中心',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '请选择'
    };
  },
  methods: {
    currentChange(n) {
      // 点击后触发
      console.log(n); // 当前页
      pageSize({ current: n, size: this.pageSizeNum }).then(res => {
        console.log(res.data, '分页数据');
        this.tableData = res.data.records
      })

    },
    handleNodeClick(e) {
      console.log(e, '点击树');
    },
    // 修改
    handleClick(item) {
      console.log(item);
      this.form = item
      this.form.radio = '1'
      this.dialogFormVisible = true
    },
    // 添加提交
    submitaMembersForm(formData) {
      console.log(formData);
      this.$refs[formData].validate((valid) => {
        console.log(valid);
        if (valid && this.form.region) {
          console.log(this.form);
          // 添加成功
          this.form = { radio: '1', }
          this.dialogFormVisible = false
          // addSave(this.form).then(res => {

          // })
        }
      })
    }
  },
  mounted() {
    getUnit(0).then(res => {
      console.log(res.data, '获取单位');
    })
    // Tree
    listChildren(0).then(res => {
      console.log(res.data, '3');
      // res.data.forEach(res => {
      //   res.label = res.dwmc
      // })
      // this.data[0].children = res.data
    })
    allTree({
      dwbm: '0',
      root: '0'
    }).then(res => {
      console.log(res, 'allTree');
      this.data[0].children = res.data
    })
    // toChangeDwbm(0).then(res => {
    //   console.log(res, 'toChangeDwbm');
    // })
    pageSize({ pageQuery: 1 }).then(res => {
      console.log(res.data.records, '分页数据');
      // console.log(res.data.total);
      this.total = res.data.total // 总条数
      this.pageSizeNum = res.data.size
      this.pageSizes[0] = res.data.size
      this.tableData = res.data.records
    })
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0;
}
.el-aside {
  margin-right: 5px;
}
grid-content bg-purple {
  display: flex;
  font-size: 10px;
}
.el-input {
  width: 25%;
  margin-right: 10px;
}
.grid-content {
  font-size: 10px;
}
.all-button {
  display: flex;
  align-items: center;
}
.el-button {
  width: 20%;
}
/* .el-select {
  width: 25%;
} */
.table_wrap {
  margin-top: 20px;
}
.el-select .el-input {
  width: 120px;
}
.dialog_input {
  width: 100%;
}
.dialog_input.el-input__inner {
  width: 180px;
}
/* 取消input框 type=number默认箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.block {
  // margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
/* .el-input{
  width: 100%;
} */
/* .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  } */
</style>